<template>
    <div class="moudle_main">
        <div class="moudle_left moudle_warp">
            <div class="moudle_warp_divs">
                <div class="moudle_warp_divs_header">
                    <img src="../../assets/image/home/waijiedata_icon.png" alt="">
                    <span>问题协调处置情况</span>
                </div>

                <div class="moudle_warp_divs_comend">
                    <Question></Question>
                </div>
            </div>


            <div class="moudle_warp_divs">
                <div class="moudle_warp_divs_header">
                    <img src="../../assets/image/home/waijiedata_icon.png" alt="">
                    <span>治理评价</span>
                </div>

                <div class="moudle_warp_divs_comend">
                    <Score></Score>
                </div>
            </div>
        </div>

        <div class="moudle_right moudle_warp">
            <div class="moudle_warp_divs moudle_warp_source">
                <div class="moudle_warp_divs_header">
                    <img src="../../assets/image/home/waijiedata_icon.png" alt="">
                    <span>资源总览</span>
                </div>

                <div class="moudle_warp_divs_comend moudle_warp_divs_source">
                    <div class="item" v-for="item in sourceData" :key="item.name">
                        <div class="title">
                            <span class="arrow"><el-icon><CaretRight /></el-icon></span>
                            <span class="name">{{ item.name }}</span>
                        </div>
                        <div class="list">
                            <div class="list-item" v-for="d in item.data" :key="d.name">
                                <span>{{ d.name }}</span>
                                <span>{{ d.value }}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="moudle_warp_divs moudle_warp_warn">
                <div class="moudle_warp_divs_header">
                    <img src="../../assets/image/home/waijiedata_icon.png" alt="">
                    <span>实时告警与问题</span>
                </div>

                <div class="moudle_warp_divs_comend">
                    <Warn></Warn>
                </div>
            </div>
            <div class="moudle_warp_divs moudle_warp_rank">
                <div class="moudle_warp_divs_header">
                    <img src="../../assets/image/home/waijiedata_icon.png" alt="">
                    <span>河长巡河排行</span>
                </div>

                <div class="moudle_warp_divs_comend">
                    <div class="btns">
                        <div class="btn" :class="{active:item.active}" v-for="item in rankTableList" :key="item.value" @click="rankBtns(item)">{{ item.label }}</div>
                    </div>
                    <div style="height: calc(100% - 2rem);width:100%">
                        <Bar :chartData="chartData2" v-if="chartData2" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue";
import { CaretRight } from '@element-plus/icons-vue'
import { paixuparb } from './echartsoptions'
import { source, rankTable, warnTable } from './dataconfig'
import Bar from '@/components/echarts/bar.vue'
import Warn from './warn.vue'
import Question from './question.vue'
import Score from './score.vue'
const sourceData = ref(source)
const activeName = ref(1)
const chartData2 = ref(null)
const rankTableList = ref(rankTable)
onMounted(() => {
    nextTick(() => {
        chartData2.value = paixuparb
    })
})
const rankBtns = (item) => {
    rankTableList.value.forEach(t => {
        t.active = false
        if (t.value === item.value) {
            t.active = true
        }
    })
}
</script>


<style lang="less" scoped>
.moudle_warp_source {
    height: 10rem;
    .moudle_warp_divs_source {
        display: flex;
        justify-content: space-between;
        color: #fff;
        .item {
            width: 33%;
            height: 100%;
            .title {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0.2rem 0;
                .arrow {
                    display: flex;
                    align-items: center;
                }
            }
            &:nth-of-type(1) {
                .title {
                    color: #90B2F4;
                }
                .list {
                    border-right: 0.01rem solid #90B2F4;
                    span:last-child {
                        color: #90B2F4;
                    }
                }
            }
            &:nth-of-type(2) {
                .title {
                    color: #81C5CA;
                }
                .list {
                    border-right: 0.01rem solid #90B2F4;
                    span:last-child {
                        color: #81C5CA;
                    }
                }
            }
            &:nth-of-type(3) {
                .title {
                    color: #EFCF5D;
                }
                .list {
                    span:last-child {
                        color: #EFCF5D;
                    }
                }
            }
            .list {
                height: calc(100% - 2rem);
                overflow: auto;
                padding: 0 0.5rem;
                .list-item {
                    display: flex;
                    justify-content: space-between;
                }
            }
        }
    }
}
.moudle_warp_rank {
    height: calc(50% - 10rem);
}
.btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0.5rem 0;
    .btn {
        background: #0B2A4A;
        width: calc(25% - 0.5rem);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.2rem 0;
        color: #fff;
        cursor: pointer;
        &.active {
            background: #636737;
        }
    }
}
</style>